<template>
    <!-- 一个文章模块 -->
    <div class="ui padded vertical segment">
        <!-- 设置手机端兼容  mobile reversed 手机端卡片美容上下翻转 stackable 可堆叠 在手机段是过于宽的内容可以上下布局-->
        <div class="ui mobile reversed stackable grid">
            <div class="eleven wide column left">
                <div>
                    <!-- 添加标题 -->
                    <router-link to="/blog">
                        <h3 v-if="size == 'small'" class="ui header">{{title}}</h3>
                        <h2 v-if="size == 'normal'" class="ui header">{{title}}</h2>
                    </router-link>
                    <!-- 添加文章简介 -->
                    <div v-if="size == 'small'" style="margin-top: 5px !important;">
                        <p class="font-limit-length-75px" v-text="introduce"></p>
                    </div>
                    <div v-if="size == 'normal'" style="margin-top: 15px !important;">
                        <p class="font-limit-length-75px" v-text="introduce"></p>
                    </div>
                </div>

                <!-- 添加文章作者信息 -->
                <div class="left-author">
                    <div class="author-info">
                        <!-- 作者头像与作者姓名-->
                        <div class="item" style="display: flex; align-items: flex-end;">
                            <img src="../assets/image/elyse.png" alt=""
                                 class="ui avatar image author-head m-padded-mini">
                            <router-link to="/about">{{author}}</router-link>
                        </div>
                        <!-- 发表日期 -->
                        <div class="item">
                            <i class="calendar icon"></i>
                            <span>{{ times | datetimeFormat}}</span>
                        </div>
                        <!-- 浏览量 -->
                        <div class="item">
                            <i class="eye icon"></i>
                            <span>{{ views }}</span>
                        </div>
                    </div>
                    <!-- 打标签 -->
                    <router-link to="/tags" class="ui teal basic label m-inline-block m-padded-mini tag-link">{{ tags }}
                    </router-link>
                </div>
            </div>
            <div class="five wide column">
                <router-link to="/blog">
                    <img :src="src" alt="" class="ui rounded article_image image">
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Article",
        props: [
            // 文章标题
            'title',
            // 文章简介
            'introduce',
            // 文章作者
            'author',
            // 发表时期
            'times',
            // 浏览量
            'views',
            // 文章标签
            'tags',
            // 首图标签
            'src',
            // 大小
            'size'
        ],
        data() {
            return {}
        },
        methods: {},
        filters: {
            // 文章日期 格式过滤器函数
            datetimeFormat(input) {
                var datetime = new Date(input);
                var y = datetime.getFullYear();
                var m = datetime.getMonth() + 1;
                var d = datetime.getDate();
                return `${y}-${m}-${d}`;
            }
        }
    }
</script>

<style lang="less" scoped>
    .article_image {
        width: 100%;
        object-fit: cover;
        height: 100%;
    }

    .left {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;

        .left-author {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
        }

        .author-head {
            transform: translateY(14%);
        }

        .author-info {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: flex-start;

            .item {
                margin-right: 10px;
                color: rgba(0, 0, 0, .4);
                min-width: 50px !important;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .left {
            padding-bottom: 4px !important;
        }

        .ui.stackable.grid>.wide.column {
            padding-bottom: 4px !important;
        }

        .left-author {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            .author-info, .tag-link {
                margin-bottom: 10px;
            }
        }
    }
</style>
